<template>
  <div class="editor-wrapper">
    <el-row :gutter="20">
      <!-- 左侧编辑区 -->
      <el-col :span="10">
        <div class="editor-card">
          <el-form :model="form" label-width="80px">
            <el-form-item label="头像">
              <el-upload
                class="avatar-uploader"
                action=""
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :on-change="handleAvatarChange"
              >
                <img v-if="form.avatar" :src="form.avatar" class="avatar-img" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="form.age" placeholder="请输入年龄" />
            </el-form-item>
            <el-form-item label="学历">
              <el-input v-model="form.degree" placeholder="请输入学历" />
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="form.phone" placeholder="请输入电话" />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="form.email" placeholder="请输入邮箱" />
            </el-form-item>
            <el-form-item label="微信">
              <el-input v-model="form.wechat" placeholder="请输入微信" />
            </el-form-item>
            <el-form-item label="求职意向">
              <el-input v-model="form.job" placeholder="请输入求职意向" />
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="form.address" placeholder="请输入地址" />
            </el-form-item>
            <el-form-item label="自我评价">
              <el-input
                type="textarea"
                v-model="form.intro"
                placeholder="请输入自我评价"
                rows="3"
              />
            </el-form-item>
            <el-form-item label="教育背景-学校">
              <el-input
                v-model="form.education.school"
                placeholder="请输入学校"
              />
            </el-form-item>
            <el-form-item label="教育背景-时间">
              <el-input
                v-model="form.education.time"
                placeholder="请输入时间"
              />
            </el-form-item>
            <el-form-item label="教育背景-专业">
              <el-input
                v-model="form.education.major"
                placeholder="请输入专业"
              />
            </el-form-item>
            <el-form-item label="教育背景-详情">
              <el-input
                type="textarea"
                v-model="form.education.detail"
                placeholder="请输入教育背景详细内容"
                rows="2"
              />
            </el-form-item>
            <el-form-item label="工作经验">
              <div
                v-for="(item, idx) in form.work"
                :key="idx"
                style="margin-bottom: 10px"
              >
                <el-input
                  v-model="item.company"
                  placeholder="公司名称"
                  style="margin-bottom: 4px"
                />
                <el-input
                  v-model="item.job"
                  placeholder="职位"
                  style="margin-bottom: 4px"
                />
                <el-input
                  v-model="item.time"
                  placeholder="时间"
                  style="margin-bottom: 4px"
                />
                <el-input
                  type="textarea"
                  v-model="item.detailStr"
                  placeholder="工作内容（每行一条）"
                  rows="2"
                  @input="item.detail = item.detailStr.split('\n')"
                />
                <el-button
                  type="danger"
                  size="mini"
                  @click="form.work.splice(idx, 1)"
                  >删除</el-button
                >
              </div>
              <el-button
                type="primary"
                size="mini"
                @click="
                  form.work.push({ company: '', job: '', time: '', detail: [] })
                "
                >新增工作经验</el-button
              >
            </el-form-item>
            <el-form-item label="职业技能">
              <div
                v-for="(skill, idx) in form.skills"
                :key="idx"
                style="margin-bottom: 4px; display: flex; align-items: center"
              >
                <el-input
                  v-model="form.skills[idx]"
                  placeholder="请输入技能描述"
                  style="flex: 1"
                />
                <el-button
                  type="danger"
                  size="mini"
                  @click="form.skills.splice(idx, 1)"
                  style="margin-left: 6px"
                  >删除</el-button
                >
              </div>
              <el-button
                type="primary"
                size="mini"
                @click="form.skills.push('')"
                >新增技能</el-button
              >
            </el-form-item>
            <el-form-item label="主题">
              <el-select
                v-model="theme"
                placeholder="选择主题"
                size="small"
                style="width: 100%"
              >
                <el-option label="浅色" value="light" />
                <el-option label="深色" value="dark" />
              </el-select>
            </el-form-item>
            <div class="editor-actions">
              <el-button type="primary" @click="saveResume" :loading="saving"
                >保存</el-button
              >
              <el-button type="default" @click="exportPDF">导出PDF</el-button>
              <span v-if="saveTip" class="save-tip">{{ saveTip }}</span>
            </div>
          </el-form>
        </div>
      </el-col>
      <!-- 右侧预览区 -->
      <el-col :span="14">
        <div :class="['preview-area', theme]">
          <div ref="pdfContent" class="resume-preview">
            <div class="resume-header">
              <div class="resume-title">
                求职简历 <span class="resume-subtitle">PERSONAL RESUME</span>
              </div>
            </div>
            <div class="resume-baseinfo">
              <div class="baseinfo-left">
                <div>姓名：{{ form.name }}</div>
                <div>年龄：{{ form.age }}</div>
                <div>学历：{{ form.degree }}</div>
                <div>手机：{{ form.phone }}</div>
                <div>邮箱：{{ form.email }}</div>
                <div>微信：{{ form.wechat }}</div>
                <div>求职意向：{{ form.job }}</div>
                <div>地址：{{ form.address }}</div>
              </div>
              <div class="baseinfo-right">
                <img :src="form.avatar" class="avatar-img" />
              </div>
            </div>
            <div class="resume-section">
              <div class="section-title">自我评价</div>
              <div class="section-content">{{ form.intro }}</div>
            </div>
            <div class="resume-section">
              <div class="section-title">教育背景</div>
              <div class="section-content">
                <div>
                  {{ form.education.school }}（{{ form.education.time }}）
                </div>
                <div>专业：{{ form.education.major }}</div>
                <div>{{ form.education.detail }}</div>
              </div>
            </div>
            <div class="resume-section">
              <div class="section-title">工作经验</div>
              <div class="section-content">
                <div
                  v-for="(item, idx) in form.work"
                  :key="idx"
                  style="margin-bottom: 10px"
                >
                  <div>
                    <strong>{{ item.job }}</strong> {{ item.company }}（{{
                      item.time
                    }}）
                  </div>
                  <ul>
                    <li v-for="(d, i) in item.detail" :key="i">{{ d }}</li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="resume-section">
              <div class="section-title">职业技能</div>
              <div class="section-content">
                <ul>
                  <li v-for="(skill, idx) in form.skills" :key="idx">
                    {{ skill }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { editSave } from "../api/UserEdit";
import html2pdf from "html2pdf.js";
export default {
  data() {
    return {
      theme: "light",
      newSkill: "",
      form: {
        avatar: "https://avatars.githubusercontent.com/u/9919?s=200&v=4",
        name: "余涵",
        age: "23",
        degree: "大学本科",
        phone: "15834598856",
        email: "5689745@qq.com",
        wechat: "jianlimoban-ziyuan.com",
        job: "行政经理/主管",
        address: "上海市浦东区",
        intro:
          "工作积极认真，细心负责，熟练运用办公自动化软件，善于在工作中提出问题、发现问题、解决问题，有较强的分析能力；勤奋好学，踏实肯干，动手能力强，认真负责，有很强的社会责任感；坚毅不拔，吃苦耐劳，喜欢面对挑战。",
        education: {
          school: "上海大学（本科）",
          time: "2012.09-2016.07",
          major: "工商管理",
          detail:
            "主修课程：基础会计学、货币银行学、统计学、经济法概论、财务会计学、管理学原理、组织行为学、市场营销学、国际贸易理论、国际贸易实务、人力资源开发与管理、财务管理学、企业经营战略概论、质量管理学、西方经济学等",
        },
        work: [
          {
            company: "贵翠实业有限公司",
            job: "行政主管",
            time: "2016.03-至今",
            detail: [
              "负责本部门的行政人事管理日常事务，协助总监做好各部门之间的综合协调，落实公司规章制度，沟通内外联系，保证上传下达和下情上传，负责会议文件决定的事项进行催办、督办和落实，负责公司日常组织承办文体活动及开展精神文明建设的订订。",
              "编制公司人事管理制度，规范各项人事标准。",
              "负责招聘工作，制定公司的人力资源发展计划，确保人才梯队发展和人才储备及培养。",
              "负责员工的行政事务及前台管理；协助处理客户服务及简单的资料管理。",
            ],
          },
          {
            company: "一路网络科技有限公司",
            job: "行政助理",
            time: "2015.03-2016.01",
            detail: [
              "负责中心的接待工作；",
              "负责中心的行政事务及前台管理；",
              "协助处理客户服务及简单的资料管理；",
              "负责中心简单的财务管理、资产管理。",
            ],
          },
        ],
        skills: [
          "大学英语6级证书，荣获全国大学生英语竞赛一等奖，能够熟练的进行听、说、读、写。",
          "计算机一级证书，熟练操作windows平台的各类办公软件，如Word、Excel、Power Point。",
          "具有丰富的团队组建与扩充经验和项目管理与协调经验，能够独挡一面，组织经验丰富。",
        ],
      },
      saving: false,
      saveTip: "",
      newWork: { company: "", job: "", time: "", detail: "" },
    };
  },
  methods: {
    exportPDF() {
      const element = this.$refs.pdfContent;
      const opt = {
        margin: 0.5,
        filename: "简历.pdf",
        image: { type: "jpeg", quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: "in", format: "a4", orientation: "portrait" },
      };

      html2pdf().set(opt).from(element).save();
    },
    addSkill() {
      const val = this.newSkill.trim();
      if (val && !this.form.skills.includes(val)) {
        this.form.skills.push(val);
        this.autoSave();
      }
      this.newSkill = "";
    },
    removeSkill(index) {
      this.form.skills.splice(index, 1);
      this.autoSave();
    },
    addProject() {
      this.form.projects.push({ title: "", desc: "" });
      this.autoSave();
    },
    removeProject(index) {
      this.form.projects.splice(index, 1);
      this.autoSave();
    },
    beforeAvatarUpload(file) {
      const isImg = file.type.startsWith("image/");
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isImg) {
        this.$message.error("只能上传图片");
      }
      if (!isLt2M) {
        this.$message.error("图片大小不能超过2MB");
      }
      return isImg && isLt2M;
    },
    handleAvatarChange(file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        this.form.avatar = e.target.result;
        this.autoSave();
      };
      reader.readAsDataURL(file.raw);
    },
    saveResume() {
      this.saving = true;
      editSave(this.form)
        .then((res) => {
          if (res.code === 200) {
            this.saveTip = "已保存";
          } else {
            this.saveTip = "保存失败：" + (res.data.msg || "未知错误");
          }
        })
        .catch((err) => {
          this.saveTip = "请求失败：" + (err.message || "网络异常");
        })
        .finally(() => {
          this.saving = false;
          setTimeout(() => {
            this.saveTip = "";
          }, 1500);
        });
    },
    autoSave() {
      this.saveTip = "已自动保存";
      setTimeout(() => (this.saveTip = ""), 1200);
    },
  },
};
</script>

<style scoped>
.editor-wrapper {
  min-height: 100vh;
  background: #fafbfc;
  padding: 32px 0;
}
.editor-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 32px 24px 18px 24px;
  margin-bottom: 18px;
}
.avatar-uploader {
  display: flex;
  align-items: center;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #bbb;
  border: 1.5px dashed #eee;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px solid #eee;
  object-fit: cover;
}
.editor-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.save-tip {
  color: #27ae60;
  font-size: 14px;
  margin-left: 8px;
}
.preview-area {
  padding: 32px 24px 18px 24px;
  border: 1px solid #eee;
  border-radius: 14px;
  min-height: 400px;
  transition: background-color 0.3s ease, color 0.3s ease;
  background: #fff;
}
.preview-area.dark {
  background-color: #222;
  color: #eee;
  border: 1px solid #222;
}
.preview-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 12px;
}
.preview-header .avatar-img {
  width: 48px;
  height: 48px;
}
.resume-preview {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 32px 32px 24px 32px;
  max-width: 800px;
  margin: 0 auto;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: #333;
}
.resume-header {
  border-bottom: 3px solid #5c6bc0;
  padding-bottom: 12px;
  margin-bottom: 18px;
}
.resume-title {
  font-size: 28px;
  font-weight: bold;
  color: #3f4a6b;
  letter-spacing: 2px;
}
.resume-subtitle {
  font-size: 16px;
  color: #5c6bc0;
  margin-left: 18px;
}
.resume-baseinfo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}
.baseinfo-left {
  flex: 1;
  font-size: 16px;
  line-height: 2.1;
}
.baseinfo-right {
  width: 110px;
  display: flex;
  justify-content: flex-end;
}
.avatar-img {
  width: 100px;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
  border: 1.5px solid #eee;
}
.resume-section {
  margin-bottom: 18px;
}
.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #3f4a6b;
  margin-bottom: 6px;
  border-left: 5px solid #5c6bc0;
  padding-left: 10px;
}
.section-content {
  font-size: 15px;
  line-height: 1.9;
  color: #444;
  padding-left: 10px;
}
@media (max-width: 900px) {
  .editor-card,
  .preview-area {
    padding: 18px 4vw 12px 4vw;
  }
}
</style>
